<template>
    <div class="settings-widget">
        <div class="settings-inner-blk p-0">
            <div class="sell-course-head comman-space">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h3>我的课程</h3>
                        <p>课程列表：12</p>
                    </div>
                    <div class="ticket-btn-grp">
                        <!-- <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addclass">创建班级</a> -->
                        <!-- <nuxt-link to="/teacher/class-add" class="btn btn-primary">
                                创建班级
                            </nuxt-link> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="showing-list">
        <div class="row">
            <div class="col-lg-6">
                <div class="d-flex align-items-center">
                    <div class="view-icons">
                        <a href="course-grid.html" class="grid-view active"><i class="feather-grid"></i></a>
                        <a href="course-list.html" class="list-view"><i class="feather-list"></i></a>
                    </div>
                    <div class="show-result">
                        <h4>Showing 1-9 of 50 results</h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="show-filter add-course-info">
                    <form action="#">
                        <div class="row gx-2 align-items-center">
                            <div class="col-md-6 col-item">
                                <div class=" search-group">
                                    <i class="feather-search"></i>
                                    <input type="text" class="form-control" placeholder="输入关键字">
                                </div>
                            </div>
                            
                            <div class="col-md-6 col-lg-6 col-item">
                                <div class="form-group select-form mb-0">
                                    <select class="form-select select" id="sel1" name="sellist1">
                                        <option>进行中 </option>
                                        <option>已结课</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div v-for="i in 10" :key="i" class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                        <div class="price">
                            <h3>Scratch</h3>
                        </div>
                    </div>
                    <div class="product-content">
                        
                        <h3 class="title"><a href="course-details.html">第15届蓝桥杯真题解析</a></h3>
                        <p style="font-size: smaller;">课程介绍的内容，课程介绍的内容课程介绍的内容课程介绍的内容课程介</p>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12个课时</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <div class="all-btn all-category d-flex align-items-center">
                            
                                    <nuxt-link to="/teacher/course-detail" class="btn btn-primary">
                                        进入课程
                                    </nuxt-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    <app-pagination />

    <div class="modal-styles modal fade" id="addclass" tabindex="-1" aria-labelledby="addpaymentMethod"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加班级</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-regular fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="addpaymethod-form add-course-info">
                        <form action="#">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label class="form-control-label">班级名称</label>
                                        <input type="text" class="form-control" placeholder="请输入班级名称">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">级别</label>
                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" checked>
                                                <span class="checkmark"></span> 入门
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> 进阶
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> 高级
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">教学科目</label>
                                        
                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" checked>
                                                <span class="checkmark"></span> Scratch
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> Python
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> C++
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">授课类型</label>
                                        
                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" checked>
                                                <span class="checkmark"></span> 线上
                                            </label>
                                            <label class="radio-inline custom_radio">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> 线下
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">班级类型</label>
                                        
                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" checked>
                                                <span class="checkmark"></span> 常规
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> 集训
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> 试听
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer me-auto">
                    <button type="button" class="btn btn-modal-style btn-theme">保存</button>
                    <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


</template>

<style>
.all-category .btn-primary {
    min-width: 0;
    padding: 6px 12px;
}
.course-info {
    border-bottom: 0px solid #C7C7C7;
    padding-bottom: 0px;
}
</style>